import React, { PureComponent } from 'react'
import { connect } from 'dva'
import { Card } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import List from './List'
import SearchForm from './SearchForm'
import styles from './Index.less'

@connect(({ propRepair }) => ({
  propRepair,
}))
export default class PropRepair extends PureComponent {
  // 组件加载完成后加载数据
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'propRepair/fetchList',
    })
  }

  // 重置事件
  handleFormReset = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'propRepair/fetchList',
    })
  }

  // 搜索事件
  handleSearch = values => {
    const { dispatch } = this.props

    dispatch({
      type: 'propRepair/fetchList',
      payload: values,
    })
  }

  // 渲染界面
  render() {
    const searchFormProps = {
      formResetCallback: this.handleFormReset,
      searchCallback: this.handleSearch,
    }
    return (
      <PageHeaderWrapper title="资产报修">
        <div className={styles.goodsInfoList}>
          <div className={styles.goodsInfoListForm}>
            <Card className={styles.noPadding} bordered={false}>
              <SearchForm {...searchFormProps}></SearchForm>
            </Card>
            <Card style={{ marginTop: 15 }} className={styles.noPadding} bordered={false}>
              <List></List>
            </Card>
          </div>
        </div>
      </PageHeaderWrapper>
    )
  }
}
